<!DOCTYPE html>
<html>


<!-- Mirrored from www.zi-han.net/theme/hplus/tree_view.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:58 GMT -->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>商品分类</title>

    <link rel="shortcut icon" href="favicon.ico"> <link href="{:ADDON_PUBLIC_PATH}/admin/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="{:ADDON_PUBLIC_PATH}/admin/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="{:ADDON_PUBLIC_PATH}/admin/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="{:ADDON_PUBLIC_PATH}/admin/css/animate.min.css" rel="stylesheet">
    <link href="{:ADDON_PUBLIC_PATH}/admin/js/theme/default/layer.css" rel="stylesheet">
    <link href="{:ADDON_PUBLIC_PATH}/admin/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="{:ADDON_PUBLIC_PATH}/admin/css/plugins/jsTree/style.min.css" rel="stylesheet">
    <style type="text/css">
        .img{width: 100px;}
        .content-left{width: 20%;float: left; padding: 0 0 0 1% !important;}
        .content-right{width: 78%;float: right;padding-right: 1%;}
    </style>
</head>

<body class="gray-bg" id="body">
    <div class="row wrapper wrapper-content animated fadeInRight">
        <div class="content-left">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>商品分类</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div id="jstree"></div>
                </div>
            </div>
        </div>
        <div class="content-right">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                        <h5>分类详情</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                </div>
                <div class="ibox-content">
                    <table class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>
                            <tr>
                                <th>编号</th>
                                <th>图标</th>
                                <th>名称</th>
                                <th>操作</th>
                                <!-- <th>CSS等级</th> -->
                            </tr>
                        </thead>
                        <tbody>
                           <tr class="gradeX">
                                <td class="cid" id="cid">暂无数据</td>
                                <td><img class='img' id="img" src="" alt="暂无数据">
                                </td>
                                <td class="cname">暂无数据</td>
                                <td class="center" style="width: 10%;">
                                    <button type="button" id='edit' class="btn btn-w-m btn-primary">编辑</button>
                                    <!-- <button type="button" id='delete' class="btn btn-w-m btn-warning">删除</button> -->
                                </td>
                            </tr>
                        </tbody>
                       <!--  <tfoot>
                            <tr>
                                <th>编号</th>
                                <th>图标</th>
                                <th>名称</th>
                                <th>操作</th>
                            </tr>
                        </tfoot> -->
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script src="{:ADDON_PUBLIC_PATH}/admin/js/jquery.min.js?v=2.1.4"></script>
    <script src="{:ADDON_PUBLIC_PATH}/admin/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="{:ADDON_PUBLIC_PATH}/admin/js/layer.js"></script>
    <script src="{:ADDON_PUBLIC_PATH}/admin/js/content.min.js?v=1.0.0"></script>
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
    <script src="{:ADDON_PUBLIC_PATH}/admin/js/plugins/dataTables/jquery.dataTables.js"></script>
    <script src="{:ADDON_PUBLIC_PATH}/admin/js/plugins/dataTables/dataTables.bootstrap.js"></script>
    <script src="{:ADDON_PUBLIC_PATH}/admin/js/plugins/jsTree/jstree.min.js"></script>
    <script type="text/javascript">
        $('#edit').click(function() {
            // body...   
            var id = document.getElementById("cid").innerText;
            // console.log(id);
            if (id == 0) {
                layer.msg('根目录不可编辑');
            }else {
                layer.open({
                    type: 2,
                    title: '新建分类',
                    skin: 'layui-layer-demo', //样式类名
                    closeBtn: 0, //不显示关闭按钮
                    anim: 2,
                    shadeClose: true, //开启遮罩关闭
                    area : ['500px' , '460px'],
                    content: "{:U('ElectricalMall/Admin/formCls/id/"+id+"/type/2')}"
                });
            }
        });
        $(function() {
             $('#jstree').jstree({
                 'core' : {
                     "themes" : {  
                        "theme": "classic",  
                        "dots": true,  
                        "icons": false  
                    },      
                    "check_callback" : function(operation, node, parent, position, more){
                        return true;
                    },
                    'data' : {
                        'url' : '__CONTROLLER__/getClsData',
                        "dataType" : "json"
                    }
                },
                'plugins' : ['contextmenu'],
                'contextmenu' : {
                    select_node:true,  
                    show_at_node:true, 
                    items:{
                         "新建分类":{    
                            "label":"新建分类",    
                            "icon"              : "glyphicon glyphicon-plus",  
                            "action":function(data){
                                 var inst = $.jstree.reference(data.reference),
                                obj = inst.get_node(data.reference); 
                                // console.log(obj);
                                layer.open({
                                  type: 2,
                                  title: '新建分类',
                                  skin: 'layui-layer-demo', //样式类名
                                  closeBtn: 0, //不显示关闭按钮
                                  anim: 2,
                                  shadeClose: true, //开启遮罩关闭
                                  area : ['500px' , '460px'],
                                  content: "{:U('ElectricalMall/Admin/formCls/id/"+obj.original.id+"/type/1')}"
                                });
                             
                                // var inst = $.jstree.reference(data.reference),  
                                // obj = inst.get_node(data.reference);
                                // inst.create_node(obj, {}, "last", function (new_node) {
                                //     setTimeout(function () {
                                //         inst.edit(new_node);
                                //         console.log(new_node);
                                //         //  if (new_node.parent == j1_1) {
                                //         //     var pid = 0;
                                //         // }else{
                                //         //     var pid = new_node.parent;
                                //         // }
                                //         // $.ajax({
                                //         //     type:'POST',
                                //         //     url:'__CONTROLLER__/createClsData/parentid/'+pid+'/name/'+new_node.text,
                                //         //     success:function(res) {
                                //         //         new_node.id = res;
                                //         //     },
                                //         //     error:function(){
                                //         //         layer.msg("服务器错误,请联系管理员");
                                //         //     }
                                //         // });
                                //     },0);//新加节点后触发 重命名方法,即 创建节点完成后可以立即重命名节点
                                // });
                            }    
                        },
                        "删除分类":{  
                            "label"             : "删除分类",  
                            "icon"              :"glyphicon glyphicon-remove",
                            "separator_before"  : false,
                            "separator_after"   : false,  
                            "action"            : function (data) { 
                                var inst = $.jstree.reference(data.reference),
                                obj = inst.get_node(data.reference); 
                                if (obj.original.id == 0) {
                                    layer.msg("根目录不可删除");
                                    return;
                                }
                                layer.confirm('确认删除该分类及其子分类?', {
                                  btn: ['确定','取消'] //按钮
                                }, function(){
                                    $.ajax({
                                        type:'POST',
                                        url:'__CONTROLLER__/deleteClsData/id/'+obj.original.id,
                                        success:function(res) {
                                            if (res > 0) {
                                                if(inst.is_selected(obj)) {  
                                                    inst.delete_node(inst.get_selected());  
                                                }else {  
                                                    inst.delete_node(obj);  
                                                }  
                                            }
                                            layer.msg('删除成功');
                                            $('#jstree').jstree('select_node',j1_1);
                                        },
                                        error:function(){
                                            layer.msg("服务器错误,请联系管理员");
                                        }
                                    });
                                }, function(){
                                  layer.msg('取消删除');
                                });  
                            }  
                        }  
                    } 
                }
            }).on("select_node.jstree", function (e, data) {
                if (data.node.original.id > 0) {
                     $.ajax({
                        type:"POST",
                        url:'__CONTROLLER__/getClsDetail/id/'+data.node.original.id,
                        dataType:"JSON",
                        success:function(res){
                            $(".cid").text(res[0]['id']);
                            $(".img").prop('src',res[0]['cl_picture']);
                            $(".cname").text(res[0]['cl_name']);
                        },
                        error:function(){
                            layer.msg("服务器错误,请联系管理员");
                        }
                    });
                }else {
                    $(".cid").text('0');
                    $(".img").prop('src','#'); //{:ADDON_PUBLIC_PATH}/images/upload/2018-04-02/5ac1c860c61b1.png
                    $(".cname").text('根目录');
                }
              }).on('loaded.jstree', function(e,data) {
                var instance = data.instance;
                var obj = instance.get_node(e.target.firstChild.firstChild.lastChild);
                instance.select_node(obj);
            });
        });
    </script>
</body>

</html>
